$(document).on('ready', function() {
    
    var tree = new Rein.Tree('#myTree');
    
    $(tree).on('select', function(event, treeNode) {
        
        if (treeNode.type == "folder") {
            $.ajax({
                url: 'getFolderDetails',
                type: 'GET',
                data: {
                    'folderId': treeNode.userData
                },
                success: function(folderJson) {
                    $pnlRight = $('#pnlRight');
                    $pnlRight.empty();
                    $pnlRight.append('<table class="tblProperties">' +
                                        '<tr>' +
                                            '<th width="90">Property</th>' +
                                            '<th>Value</th>' +
                                        '</tr>' +
                                        '<tr>' +
                                            '<td>Name</td>' +
                                            '<td>' + folderJson.name + '</td>' +
                                        '</tr>' +
                                    '</table>' +
                                '<button id="btnEditFolder">Edit</button>' +
                                '<button id="btnDelteFolder">Delete</button>');
                    $('#btnEditFolder', $pnlRight).on('click', function() {
                        window.location.href = 'editFolder?folderId=' + folderJson.id;
                    })
                    
                },
                dataType: 'json'
            });
        }
        else if (treeNode.type == "linkCollection") {
            
        }
    });
    
    $('#btnNewFolder').on('click', function() {
        window.location.href = 'createFolder';
    });
    
    $.ajax({
        url: 'getTree',
        type: 'GET',
        success: function(json) {
            tree.loadFromJson(json);
        },
        dataType: 'json'
    });
});